<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025 智能点名系统</title>
    <style>
        :root {
            --neon-blue: #6e8efb;
            --hologram-pink: #ff61d6;
        }

        body {
            background: #000;
            font-family: 'Orbitron', sans-serif;
            color: white;
            text-align: center;
            margin: 0;
            min-height: 100vh;
        }

        .cyber-board {
            width: 90%;
            margin: 2rem auto;
            padding: 2rem;
            backdrop-filter: blur(10px);
            border: 2px solid var(--neon-blue);
            box-shadow: 0 0 30px rgba(110, 142, 251, 0.3);
            border-radius: 10px;
        }

        .particle-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .student-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border: 1px solid var(--neon-blue);
            border-radius: 8px;
            transition: transform 0.3s, background 0.3s;
            position: relative;
            overflow: hidden;
        }

        .student-card.highlight {
            animation: pulse 0.8s ease-in-out infinite;
        }

        .student-card.highlight::after {
            color: yellow;
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    var(--neon-blue) 50%,
                    transparent 80%);
            animation: starlight 1.5s linear infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.15);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes starlight {
            to {
                transform: rotate(360deg);
            }
        }

        .glow-button {
            background: linear-gradient(135deg, var(--neon-blue), var(--hologram-pink));
            padding: 1rem 2rem;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
            margin: 0 0.5rem;
        }

        @media (max-width: 768px) {
            .particle-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .glow-button {
                padding: 0.8rem 1.5rem;
                font-size: 14px;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="cyber-board">
        <div class="particle-grid" id="studentGrid"></div>
        <div class="control-panel">
            <input type="number" id="pointsInput" placeholder="📈 积分调整值">
            <button class="glow-button1 glow-button" onclick="toggleLottery()">🎲 量子点名</button>
            <button class="glow-button" onclick="updatePoints()">✨ 同步积分</button>
        </div>
    </div>

    <script>
        // 学生数据集 
        let students = [
            { "学号": "231303XXXX1", "姓名": "陈艳玲", "积分": 2 },
            { "学号": "231303XXXX2", "姓名": "邓嘉诚", "积分": 2 },
            { "学号": "231303XXXX3", "姓名": "杜奇", "积分": 0 },
            { "学号": "231303XXXX4", "姓名": "范宗凯", "积分": -2 },
            { "学号": "231303XXXX5", "姓名": "方伊萍", "积分": 1 },
            { "学号": "231303XXXX6", "姓名": "何宝林", "积分": 1 },
            { "学号": "231303XXXX7", "姓名": "何泽方", "积分": 8 },
            { "学号": "231303XXXX10", "姓名": "黄骑龙", "积分": 2 },
            { "学号": "231303XXXX11", "姓名": "姜晓琴", "积分": 4 },
            { "学号": "231303XXXX12", "姓名": "雷聪", "积分": 2 },
            { "学号": "231303XXXX13", "姓名": "黎梓瑜", "积分": 0 },
            { "学号": "231303XXXX14", "姓名": "李浩东", "积分": 1 },
            { "学号": "231303XXXX15", "姓名": "李军", "积分": 2.5 },
            { "学号": "231303XXXX16", "姓名": "梁光涛", "积分": 4 },
            { "学号": "231303XXXX17", "姓名": "刘崇彬", "积分": 4 },
            { "学号": "231303XXXX18", "姓名": "刘伟", "积分": 2 },
            { "学号": "231303XXXX19", "姓名": "聂宇文", "积分": 10 },
            { "学号": "231303XXXX20", "姓名": "谭华盛", "积分": 10 },
            { "学号": "231303XXXX21", "姓名": "万星扬", "积分": 8 },
            { "学号": "231303XXXX22", "姓名": "王楠", "积分": 2 },
            { "学号": "231303XXXX23", "姓名": "王旭", "积分": 3 },
            { "学号": "231303XXXX24", "姓名": "温巧玲", "积分": 1 },
            { "学号": "231303XXXX25", "姓名": "温鑫", "积分": 0 },
            { "学号": "231303XXXX26", "姓名": "吴敦国", "积分": 1 },
            { "学号": "231303XXXX27", "姓名": "吴佳琦", "积分": 8 },
            { "学号": "231303XXXX28", "姓名": "谢国宝", "积分": 0 },
            { "学号": "231303XXXX29", "姓名": "谢伟达", "积分": 0 },
            { "学号": "231303XXXX30", "姓名": "鄢智蔚", "积分": 3 },
            { "学号": "231303XXXX31", "姓名": "杨婧", "积分": 2 },
            { "学号": "231303XXXX32", "姓名": "易圣航", "积分": 0 },
            { "学号": "231303XXXX33", "姓名": "易梓晨", "积分": 7.5 },
            { "学号": "231303XXXX34", "姓名": "赵思逸", "积分": 2 },
            { "学号": "231303XXXX35", "姓名": "赵毅豪", "积分": 5 },
            { "学号": "231303XXXX36", "姓名": "钟纹萍", "积分": 4 },
            { "学号": "231303XXXX37", "姓名": "周佳佳", "积分": 11 }
        ]

        // 系统状态控制 
        let isRolling = false;
        let rollInterval = null;
        let currentWinnerIndex = -1;
        let isProcessing = false;

        // 量子点名开关 
        function toggleLottery() {
            if (isProcessing) return;
            isProcessing = true;

            const rollBtn = document.querySelector('.glow-button1');
            console.log(158, rollBtn);

            if (!isRolling) {
                // 启动量子点名 
                isRolling = true;
                rollBtn.innerHTML = '⏹️ 停止抽取';
                rollBtn.style.background = 'linear-gradient(135deg, #ff6161, #ff61d6)';

                // 动态闪烁逻辑 
                rollInterval = setInterval(() => {
                    document.querySelectorAll('.student-card').forEach(card => {
                        card.classList.remove('highlight');
                    });
                    currentWinnerIndex = Math.floor(Math.random() * students.length);
                    document.querySelectorAll('.student-card')[currentWinnerIndex].classList.add('highlight');
                }, 5);
            } else {
                // 终止量子点名 
                isRolling = false;
                clearInterval(rollInterval);

                rollBtn.innerHTML = '🎲 量子点名';
                rollBtn.style.background = 'linear-gradient(135deg, #6e8efb, #ff61d6)';

                // 锁定最终选择 
                const finalCard = document.querySelectorAll('.student-card')[currentWinnerIndex];
                finalCard.style.animation = 'pulse 1s infinite';
            }
            setTimeout(() => isProcessing = false, 500);
        }




        // 其他功能保持不变 
        function renderParticleGrid() {
            const grid = document.getElementById('studentGrid');
            grid.innerHTML = students.map(student => `
                <div class="student-card" data-id="${student.学号}">
                    <h3>${student.姓名}</h3>
                    <p>🪙 ${student.积分}pt</p>
                </div>
            `).join('');
        }
        function updatePoints() {
            const points = parseInt(document.getElementById('pointsInput').value);
            const selected = document.querySelector('.student-card.highlight');
            if (selected && !isNaN(points)) {
                const studentId = selected.dataset.id;
                let student = students.find(s => s.学号 === studentId);
                student.积分 += points;
                renderParticleGrid();
                document.querySelector(`[data-id="${studentId}"]`).classList.add('highlight');
            }
        }

        // 初始化渲染 
        renderParticleGrid();
    </script>
</body>

</html>